<template>
  <div id="teamPage">
    <van-search v-model="searchText" placeholder="搜索队伍" clearable="true" @search="onSearch"/>
    <van-tabs v-model:active="activeTab" @change="onTabChange">
      <van-tab title="公开" name="public"/>
      <van-tab title="加密" name="private"/>
    </van-tabs>
    <van-button type="primary" @click="doJoinTeam">创建队伍</van-button>
    <team-card-list :teamList="teamList"/>
    <van-empty v-if="teamList.length < 1" description="数据为空"/>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'; // 引入 ref 和 onMounted
import { useRouter } from 'vue-router';
import myAxios from '../plugins/myAxios';
import { showSuccessToast, showFailToast } from 'vant';

const router = useRouter();

const teamList = ref([]); // 响应式数据定义
const searchText = ref(''); // 搜索框绑定数据
const activeTab = ref("public");


// 加入队伍操作
const doJoinTeam = () => {
  router.push({
    path: '/team/add'
  });
};

// 获取队伍列表
const listTeam = async (val = '',status = 0) => {
  try {
    const res = await myAxios.get('/team/list/my/create', {
      params: {
        searchText: val,
        pageNum: 1,
        status,
      }
    });

    if (res?.code === 0) {
      teamList.value = res.data; // 更新队伍列表
    } else {
      showFailToast('加载队伍失败，请刷新');
    }
  } catch (error) {
    showFailToast('请求失败，请检查网络');
  }
};


//status= 2
const onTabChange = (name) => {
  const statusMap = {
    public: 0,
    private: 2
  };
  listTeam(searchText.value, statusMap[name]);
};


// 页面加载时获取队伍数据
onMounted(() => {
  listTeam(); // 初始加载队伍
});

// 搜索触发
const onSearch = (val) => {
  listTeam(val);
};

</script>

<style scoped>
#teamPage {
  /* 这里可以加入一些自定义的样式 */
}
</style>
